<template>
    <div>
      <van-icon name="arrow-left" class='back' @click="$router.back()" />
      <van-search
            v-fofo
            v-model.trim="value"
            shape="round"
            background="#4fc08d"
            placeholder="请输入搜索关键词"
            @input='sousuo'
            @search="queding" />
      <!-- 搜索建议 -->
      <div class="jieguo" v-show="value">
        <p v-for="(item,index) in list" :key="index" v-html="light(item,value)" @click="jianyi(item)"></p>
      </div>
      <!-- 搜索历史 -->
      <div class="lishi" v-show="!value">
         <div class="lishii">
            <div>
                <div>搜索历史</div>
                <van-icon name="delete" @click="qingkong"/>
            </div>
         </div>
         <div class="lishi2">
            <span v-for="(item,index) in history" :key="index" @click="lishi(item)">{{item}}</span>
         </div>
      </div>
    </div>
</template>

<script>
import {searchApi} from '@/api/index.js'
import { Dialog } from 'vant';
export default {
  name:'search',
   data(){
     return{
       value:'',  //input框中的关键词
       timer:null, //防抖用的定时器变量
       list:[],  //搜索建议的关键词数组
       history:JSON.parse(localStorage.getItem('has')) || [], //搜索历史记录数组
     }
   },
   methods:{
     sousuo(){ //输入框内容改变触发的事件
        //开启防抖
        if(this.value.length==0) { //如果是空值直接退出即可
            this.list=[];
          }else{
               clearInterval(this.timer)
               this.timer=setTimeout(async()=>{
                 if(this.value.length==0)return
               const res=await searchApi(this.value)
             this.list=res.data.data.options
        },500)
          }
     },
     light(origstr,target){ //专门用来处理关键字高亮的方法
         //origstr代表原来的字符串,target代表关键字
         //字符串中的replace会替换全部字符串 replace第一个参数是一个字符串或者正则表达式(要替换的值),第二个是替换后的值
         //replace只会替换第一个,replaceAll会全部替换符合条件的
         //因为要忽略大小写,所以第一个参数传递一个正则表达式
         //正则表达式如果要匹配变量要使用,new RegExp的方式
         //replace第二个参数可以传一个回调函数,里面返回要替换的值,里面的第一个参数match就是匹配原字符串的值
         let reg=new RegExp(target,'ig') 
        return origstr?.replace(reg,(match)=>{ //match就是匹配的原字符串,我们只需要给他设置样式即可
          return `<span style="color:red">${match}</span>`
        })
     },
     queding(){ //搜索时触发的事件
            if(this.value){
            this.history.push(this.value)}
            setTimeout(()=>{
              if(this.value){
              this.$router.push(`/searchresult?key=${this.value}`)
            }
            },0)
     },
     jianyi(str){ //搜索建议的点击事件
         this.history.push(str)
         setTimeout(()=>{
            this.$router.push(`/searchresult?key=${str}`)
            },0)
     },
     lishi(str){ //搜索历史的点击事件
        this.$router.push(`/searchresult?key=${str}`)
     },
     qingkong(){ //清除历史记录
         Dialog.confirm({
            message: '确定要清空历史记录吗',
          })
            .then(() => {
              this.history=[]
            })
            .catch(() => {
              // on cancel
            });
     }
   },
  watch:{
     history:{
        deep:true , //开启色深度监视
        handler(){
          let thelfe=[...new Set(this.history)]
          if(thelfe.length==20){
             thelfe.length=20
          }
          localStorage.setItem('has',JSON.stringify(thelfe))
        }
     }
   }
}
</script>

<style lang='less' scoped>
.back{
  position: absolute;
  top: 15px;
  margin-left: 10px;
  font-size: 20px;
}
.van-search__content{
  margin-left: 30px;
}
.jieguo{
  margin-left:10px;
  p{font-size:15px}
}
.lishi{
      .lishii{
        margin-left: 10px;
        margin-top: 10px;
      div{
        width: 350px;
        display: flex;
        justify-content: space-between;
        div{font-size: 20px;};
        i{font-size: 20px;}
      }
      };
      .lishi2{
        margin-top: 20px;
        span{
           line-height: 30px;
            text-align: center;
             display:inline-block;
             width: 60px;
             height: 30px;
             background-color:rgb(227, 219, 219);
             border-radius:20px;
             font-size:13px;
             margin-left:10px;
             margin-top: 10px;
            }
      }
}
</style>